<template>
	<div class="system_user_wrapper">
		<user-aside class="tree" v-model="queryData.deptId" @selected="handleQueryTableData()" />
		<sw-common-frame class="user" :count="dataCount" :loading="loading">
			<template slot="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
				<el-button size="small" type="primary" plain icon="el-icon-sw-import" @click="handleImportUser()">导入</el-button>
			</template>
			<search-form slot="query" v-model="queryData" @search="handleQueryTableData()" />
			<div slot="header" class="user_batch_oper">
				<h4>选中：{{ selectedUser.length }} 人</h4>
				<el-button size="small" type="primary" plain @click="handleExportUser()">导出</el-button>
				<el-button size="small" type="danger" :disabled="isDisabled" plain @click="handleBatchDelete()">批量删除</el-button>
				<el-button size="small" type="warning" :disabled="isDisabled" plain @click="handleBatchConfigRoles()">批量配置角色</el-button>
				<el-button size="small" type="success" :disabled="isDisabled" plain @click="handleBatchResetPassword()">批量重置密码</el-button>
				<el-button size="small" type="info" :disabled="isDisabled" plain @click="handleBatchConfigDepart()">批量配置部门</el-button>
				<el-button size="small" type="primary" :disabled="isDisabled" plain @click="handleBatchConfigLevel()">批量配置级别</el-button>
			</div>
			<el-table v-bind="tableConfig" :data="tableData" @selection-change="handleSelectionChange" @row-click="handleRowClick">
				<el-table-column type="selection" width="42" align="center"></el-table-column>
				<el-table-column label="用户姓名(账号)" prop="name" min-width="150" :formatter="returnUserAccount" show-overflow-tooltip />
				<el-table-column label="用户院系" prop="deptName" min-width="123" show-overflow-tooltip></el-table-column>
				<el-table-column label="用户角色" min-width="148">
					<template slot-scope="{ row }">
						<el-tag size="small" disable-transitions v-for="(item, index) in row.menuRoleList" :key="index">{{ item.name }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="70" :formatter="returnUserStatus"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160" />
				<el-table-column label="操作" width="174">
					<el-button-group slot-scope="{ row }">
						<el-button size="mini" type="warning" @click.stop="handleOpenDialog(row.id)">编辑</el-button>
						<template v-if="row.del === '-1'">
							<el-button size="mini" type="success" @click.stop="handleRestoreDelete(row)">还原</el-button>
						</template>
						<el-button v-else size="mini" type="danger" @click.stop="handleTableDelete(row)">删除</el-button>
						<el-dropdown size="medium" trigger="hover" @command="handleUserCommand($event, row)">
							<el-button size="mini" type="info" icon="el-icon-sw-more"></el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="blockedAccount" v-if="row.del === '1'">封禁账号</el-dropdown-item>
								<el-dropdown-item command="activateAccount" v-if="row.del === '2'">激活账号</el-dropdown-item>
								<el-dropdown-item command="updatePassword">重置密码</el-dropdown-item>
								<el-dropdown-item command="configUserRole">配置角色</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-button-group>
				</el-table-column>
			</el-table>
			<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
		</sw-common-frame>
		<form-dialog v-model="formDialog" :data-id="dataId" :list="roleListData" @refresh="queryTableData()"></form-dialog>
		<import-dialog v-model="importDialog"></import-dialog>
	</div>
</template>

<script>
import userAside from './aside';
import formDialog from './form';
import searchForm from './search';
import importDialog from './import';
import handleMixins from './handle';
import listMixins from '@/mixins/listMixins';
import { getUserList, batchDeleteUser } from '@/api/system/tbSysUser';
export default {
	mixins: [listMixins, handleMixins],
	components: { userAside, searchForm, formDialog, importDialog },
	enums: ['TB_SYS_USER_TYPE', 'TB_SYS_USER_SEX'],
	data() {
		return {
			pageName: '用户',
			importDialog: false,
			selectedUser: [],
			tableConfig: {
				ref: 'table',
				stripe: true,
				slot: 'table',
				size: 'medium',
				height: '100%',
				rowClassName: 'userrow'
			}
		};
	},
	computed: {
		listFunction() {
			return eval(getUserList);
		},
		deleteFunction() {
			return eval(batchDeleteUser);
		},
		isDisabled() {
			return this.selectedUser.length === 0;
		}
	},
	methods: {
		//表格数据删除
		handleTableDelete(data) {
			let params = { ...data, name: data.userName };
			this.handleDeleteData([params]);
		},

		//批量删除数据
		handleBatchDelete() {
			let params = this.selectedUser.map((n) => {
				return { ...n, name: n.userName };
			});
			this.handleDeleteData(params);
		},

		//删除用户请求
		async deleteDataRequest(ids) {
			let params = ids.map((id) => ({ id }));
			let result = await batchDeleteUser(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除成功');
				this.queryTableData();
			}
		},

		//更多操作
		handleUserCommand(command, data) {
			if (command === 'blockedAccount') {
				this.handleBanAndRecoveryUser(data.id, 2, '封禁');
			} else if (command === 'activateAccount') {
				this.handleBanAndRecoveryUser(data.id, 1, '激活');
			} else if (command === 'updatePassword') {
				this.handleResetUserPassword(data.id);
			} else if (command === 'configUserRole') {
				this.handleConfigUserRoles(data);
			}
		},

		//选中数据项
		handleSelectionChange(selection) {
			this.selectedUser = [...selection];
		},

		handleRowClick(row, column, event) {
			let isChecked = this.selectedUser.some((n) => n.id === row.id);
			this.$refs['table'].toggleRowSelection(row, !isChecked);
		},

		//格式化用户姓名账号
		returnUserAccount(data) {
			return `${data.userName}(${data.account})`;
		},

		//格式化用户状态
		returnUserStatus(data) {
			let attrs = { size: 'small', disableTransitions: true };
			if (data.del === '1') {
				attrs['type'] = 'success';
				return this.$createElement('elTag', { attrs }, '可用');
			} else if (data.del === '2') {
				attrs['type'] = 'warning';
				return this.$createElement('elTag', { attrs }, '禁用');
			} else if (data.del === '-1') {
				attrs['type'] = 'danger';
				return this.$createElement('elTag', { attrs }, '删除');
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.system_user_wrapper {
	display: flex;
	height: 100%;
	overflow: hidden;
	&:deep(.tree) {
		flex-shrink: 0;
	}
	&:deep(.user) {
		flex: 1;
		overflow: hidden;
	}
	&:deep(.el-table__row.userrow) {
		cursor: pointer;
		user-select: none;
	}
}
.user_batch_oper {
	display: flex;
	align-items: center;
	height: 32px;
	h4 {
		flex: 1;
		overflow: hidden;
		font-weight: normal;
		font-size: 16px;
		color: #606266;
	}
}
</style>
